<template>
	<view class="container" v-if="!loading && listShow">
		<!-- 顶部面板 -->
		<view class="top--panel">
			<!-- 搜索栏 begin -->
			<view class="search-box">
				<view class="search-input" @tap="goSearch">
					<image src="/static/images/search-icon.png" class="search-icon"></image>
					<view>搜索</view>
				</view>
			</view>
			<!-- 搜索栏 end -->
			<!-- 顶部面板，可添加所需要放在页面顶部的内容代码。比如banner图 -->
			<view class="nav">
				<view class="header">
					<view class="left" v-if="orderType == 'takein'" @click="changeShop">
						<view class="store-name">
							<image class="mr-10" style="width: 30rpx;" src="../../static/images/change.png"
								mode="widthFix"></image>
							<text> {{store.name}} </text>
							<view class="iconfont iconarrow-right"></view>
						</view>
						<view class="store-location">
							<image mode="widthFix" src='/static/images/order/location.png' style="width: 30rpx; "
								class="mr-10"></image>
							<text>距离您{{store.distance}}</text>
						</view>
					</view>
					<view class="left overflow-hidden" v-else>
						<view class="d-flex align-items-center overflow-hidden">
							<image src='/static/images/order/location.png' style="width: 30rpx; height: 30rpx;"
								class="mr-10"></image>
							<view class="font-size-extra-sm text-color-base font-weight-bold text-truncate"
								style="font-size: 28rpx;">
								{{ store.address }}
							</view>
						</view>
						<view class="font-size-sm text-color-assist overflow-hidden text-truncate">
							<view class="" style="display: flex;align-items: center;">
								<image style="width: 30rpx;" src="../../static/images/change.png" mode="widthFix">
								</image>
								由<text class="text-color-base" style="margin: 0 10rpx">{{ store.name }}</text>配送
							</view>
						</view>
					</view>
					<!-- <view class="right">
						<view class="dinein" :class="{active: orderType == 'takein'}" @tap="SET_ORDER_TYPE('takein')">
							<text>自取</text>
						</view>
						<view class="takeout" :class="{active: orderType == 'takeout'}" @tap="takout">
							<text>外卖</text>
						</view>
					</view> -->
					<view class="right" style="padding: 0;">
						<view class="dinein" style="" :class="{active: orderType == 'takein'}"
							@tap="SET_ORDER_TYPE('takein')">
							<text>自取</text>
						</view>

					</view>
				</view>
				<!-- <view class="coupon">
					<text class="title">"霸气mini卡"超级购券活动，赶紧去购买</text>
					<view class="iconfont iconarrow-right"></view>
				</view> -->
			</view>

		</view>
		<!-- 滚动区域 -->
		<view class="scroll-panel" id="scroll-panel">
			<view class="list-box">
				<view class="left">
					<scroll-view scroll-y="true" class="menus" :style="{ 'height':scrollHeight + 'px' }"
						:scroll-into-view="leftIntoView" :scroll-with-animation="true">
						<view class="wrapper">
							<view class="item" v-for="(item,index) in goods" :key="index"
								:class="{ 'active':index==leftIndex }" :id="'left-'+index" :data-index="index"
								@tap="leftTap">
								<text>{{item.name}}</text>
								<view class="dot" v-show="menuCartNum(item.id)">{{ menuCartNum(item.id) }}</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="main">
					<scroll-view class="goods" scroll-y="true" :style="{ 'height':scrollHeight + 'px' }"
						@scroll="mainScroll" :scroll-into-view="scrollInto" :scroll-with-animation="true">
						<view class="wrapper">
							<view class="list">
								<view class="item main-item" v-for="(item,index) in goods" :key="index"
									:id="'item-'+index">
									<view class="title">
										<text>{{ item.name }}</text>
										<image :src="item.icon" class="icon"></image>
									</view>
									<view class="items">
										<view class="good" @click="showGoodDetail(item, good)"
											v-for="(good,index2) in item.product" :key="index2">
											<image class="image" :src="good.image_url" mode="">
											</image>
											<view class="right">
												<text class="name">{{ good.name }}</text>
												<text class="tips">{{ good.description }}</text>
												<view class="price_and_action">
													<view class="price_dec">
														<text class="price">￥{{ ((good.cups[0].price)/100)}}</text>
														<text
															class="original_price">￥{{ ((good.cups[0].original_price)/100)}}</text>
													</view>
													<view class="btn-group" v-if="good.extraproperties">
														<button type="primary" class="btn property_btn"
															hover-class="none" size="mini"
															@tap.stop="showGoodDetail(item, good)">
															选规格
														</button>
														<view class="dot" v-show="goodCartNum(good.id)">
															{{ goodCartNum(good.id) }}
														</view>
													</view>
													<view class="btn-group" v-else>
														<button type="default" plain class="btn reduce_btn" size="mini"
															hover-class="none">
															<view class="iconfont iconsami-select"></view>
														</button>
														<view class="number">23</view>
														<button type="primary" class="btn add_btn" size="min"
															hover-class="none">
															<view class="iconfont iconadd-select"></view>
														</button>
													</view>
												</view>
											</view>
										</view>
									</view>

								</view>
								<view class="fill-last" :style="{ 'height':fillHeight + 'px' }"></view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<!-- 购物车详情popup -->
			<popup-layer direction="top" :show-pop="cartPopupVisible" class="cart-popup">
				<template slot="content">
					<view class="top">
						<text @tap="handleCartClear">清空</text>
					</view>
					<scroll-view class="cart-list" scroll-y>
						<view class="wrapper">
							<view class="item" v-for="(item, index) in cartGoods" :key="index">
								<view class="left">
									<view class="name">{{ item.name }}</view>
									<view class="props">{{ item.desc }}</view>
								</view>
								<view class="center">
									<text>￥{{ (item.totalPrice/100).toFixed(2) }}</text>
								</view>
								<view class="right">
									<button type="default" plain size="mini" class="btn" hover-class="none"
										@tap="handleCartItemReduce(index)">
										<view class="iconfont iconsami-select"></view>
									</button>
									<view class="number">{{ item.num }}</view>
									<button type="primary" class="btn" size="min" hover-class="none"
										@tap="handleCartItemAdd(index)">
										<view class="iconfont iconadd-select"></view>
									</button>
								</view>
							</view>
							<!-- <view class="item" v-if="orderType == 'takeout' && store.packing_fee">
								<view class="left">
									<view class="name">包装费</view>
								</view>
								<view class="center">
									<text>￥{{ parseFloat(store.packing_fee) }}</text>
								</view>
								<view class="right invisible">
									<button type="default" plain size="mini" class="btn" hover-class="none">
										<view class="iconfont iconsami-select"></view>
									</button>
									<view class="number">1</view>
									<button type="primary" class="btn" size="min" hover-class="none">
										<view class="iconfont iconadd-select"></view>
									</button>
								</view>
							</view> -->
						</view>
					</scroll-view>
				</template>
			</popup-layer>
			<!-- 购物车详情popup -->
		</view>
		<!-- 底部面板 -->
		<view class="bottom-panel">
			<!-- 底部面板，可添加所需要放在页面底部的内容代码。比如购物车栏目 -->
			<!-- 购物车栏 begin -->
			<view class="cart-box" v-if="totalPrice.zn > 0">
				<view class="mark">
					<image src="/static/images/menu/cart.png" class="cart-img" @tap="openCartPopup"></image>
					<view class="tag">{{ totalPrice.zn }}</view>
				</view>
				<view class="price">合计￥{{ totalPrice.zp }}</view>
				<button type="primary" class="pay-btn" @tap="toPay" :disabled="disabledPay">
					{{ disabledPay ? `差${spread}元起送` : '去结算' }}
				</button>
			</view>
			<!-- 购物车栏 end -->
		</view>
	</view>
	<view class="loading" v-else-if="!loading&&!listShow">
		<u-empty text="当前地区暂未开通店铺哦~" mode="favor"></u-empty>
	</view>
	<view class="loading" v-else>
		<image src="https://res.uxiao.vip/utea-admin/loading.gif"></image>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				scrollHeight: 1000,
				scrollTopSize: 0,
				fillHeight: 0, // 填充高度，用于最后一项低于滚动区域时使用
				leftArray: [],
				mainArray: [],
				topArr: [],
				leftIndex: 0,
				listShow: true,
				scrollInto: '',
				goods: [],
				cart: [],
				latitude: '',
				longitude: '',
				status: true,
				loading: true,
				cartPopupVisible: false,
				isPageActive: true, // 新增：页面是否处于活动状态
			}
		},
		async onShow() {
			this.isPageActive = true;
			if (this.refresh) {
				this.topArr = []
				// await this.getListData(this.store.id)
				this.SET_STATUS(false)
			}
			console.log(this.topArr,999999);
			if(this.topArr.length == 0){
				if (Object.keys(this.store).length > 0) {
					this.getListData(this.store.id)
				} else {
					this.getseting()
				}
			}else{
				if (uni.getStorageSync('goodId')) {
					if (this.isLogin) {
						uni.navigateTo({
							url: "/goods/goodsDetail/goodsDetail?id=" + uni.getStorageSync('goodId')
						})
					} else {
						uni.navigateTo({
							url: "/pages/Login/index"
						})
					}
					uni.removeStorageSync('goodId')
				}
				this.checkShopStatus()
			}
			
		},
		onHide() {
			this.isPageActive = false;
		},
		computed: {
			...mapState(['cartGoods', 'orderType', 'store', 'refresh']),
			...mapGetters(['totalPrice', 'isLogin']),
			/* 计算左侧滚动位置定位 */
			leftIntoView() {
				return `left-${this.leftIndex > 3 ? (this.leftIndex-3):0}`;
			},
			goodCartNum(id) { //计算单个饮品添加到购物车的数量
				return (id) => this.cartGoods.reduce((acc, cur) => {
					if (cur.id === id) {
						return acc += cur.num
					}
					return acc
				}, 0)
			},
			// getCartGoodsNumber() { //计算购物车总数
			// 	return this.cartGoods.reduce((acc, cur) => acc + cur.num, 0)
			// },
			// getCartGoodsPrice() {	//计算购物车总价
			// 	let price = this.cartGoods.reduce((acc, cur) => acc + cur.num * cur.totalPrice, 0)
			// 	return (price/100).toFixed(2)
			// },
			menuCartNum(id) {
				return (id) => this.cartGoods.reduce((acc, cur) => {
					if (cur.category_id === id) {
						return acc += cur.num
					}
					return acc
				}, 0)
			},
		},
		onLoad() {
			// if (Object.keys(this.store).length > 0) {
			// 	this.getListData(this.store.id)
			// } else {
			// 	this.getseting()
			// }
		},
		watch: {
			status() {
				console.log(this.status);
				if (!this.status) {

				}
			}
		},
		methods: {
			...mapMutations(['clear_cart', 'SET_STATUS', 'add_cartGoods', 'reduce_cartGoods', 'SET_STORE',
				'SET_ORDER_TYPE'
			]),
			changeShop() {
				console.log(124);
				uni.navigateTo({
					url: "/goods/index/location"
				})
			},
			takout() {
				if (this.orderType == 'takeout') return
				if (!this.isLogin) {
					uni.navigateTo({
						url: '/pages/Login/index'
					})
					return
				}
				uni.navigateTo({
					url: '/goods/address/address?is_choose=true'
				})
			},
			getseting() {
				console.log('回到个人位置');
				let that = this
				uni.getSetting({
					success: (res) => {
						if (!this.isPageActive) {
							return;
						}
						console.log(res);
						let authSetting = res.authSetting
						if (authSetting['scope.userLocation']) {
							that.getCurrentLocation()
						} else if (authSetting['scope.userLocation'] === false) {
							console.log(3); //用户已经拒绝位置授权 然后再次进去
							uni.reLaunch({
								url: "/goods/index/location"
							})
						} else {
							console.log(2);
							uni.authorize({
								scope: 'scope.userLocation',
								success: () => {
									that.getCurrentLocation()
								},
								fail: () => { //首次进去用户拒绝位置授权
									uni.reLaunch({
										url: "/goods/index/location"
									})
								}
							})
						}
					}
				})
			},
			getCurrentLocation() {
				if (!this.isPageActive) {
					return;
				}
				let that = this
				uni.getLocation({
					type: 'gcj02',
					isHighAccuracy: false,
					timeout: 5000, // 5秒超时（单位ms）
					enableHighAccuracy: false,
					success: (res) => {
						console.log("当前坐标信息：", res)
						that.latitude = res.latitude
						that.longitude = res.longitude
						setTimeout(() => that.init(), 0);
					},
					fail: (err) => {
						switch (err.errCode) {
							case 1: // 用户拒绝
								// this.showPermissionGuide()
								break
							case 2: // 位置不可用
								uni.showToast({
									title: '无法获取位置信息,请检查设备定位权限',
									icon: 'none',
									duration: 1500
								})
								break
							case 3: // 超时
								uni.showToast({
									title: '定位超时，请重试',
									icon: 'none'
								})
								break
							default:
								console.error('定位错误', err)
						}
						setTimeout(() => {
							uni.reLaunch({
								url: "/pages/tarbar/home"
							})
						}, 1500)
					}
				})
			},
			async checkShopStatus() {
				let res = await this.apiPost('/shop/list')
				console.log(res);
				if (res.data.code == 1) {
					res.data.data.forEach(item => {
						if (this.store.id == item.id) {
							console.log(11111, item);
							if (item.status == 0) {
								uni.showModal({
									title: '提示',
									content: '当前店铺已打烊,请选择其他店铺下单吧~',
									showCancel: false,
									success: (res) => {
										if (res.confirm) {
											uni.reLaunch({
												url: "/goods/index/location"
											})
										}
									}
								})
								this.status = false
							} else {
								this.status = true
							}
						}
					})
				} else {
					this.msg(res.data.msg)
				}
			},
			async getShop() {
				let res = await this.apiPost('/shop/getNearShop', {
					longitude: this.longitude,
					latitude: this.latitude,
					distance: 20
				})
				console.log(res);
				if (res.data.code == 1) {
					if (res.data.data.length > 0) {
						this.SET_STORE(res.data.data[0])
						await this.getListData(res.data.data[0].id);
					} else {
						//当前地区无店铺
						this.loading = false
						this.listShow = false
					}
				} else {
					this.msg(res.data.msg)
				}
			},
			goSearch() {
				uni.navigateTo({
					url: "/goods/search/search"
				})
			},
			toPay() {
				uni.navigateTo({
					url: "/pages/pay/pay"
				})
			},
			openCartPopup() { //打开/关闭购物车列表popup
				this.cartPopupVisible = !this.cartPopupVisible
			},
			//清空购物车
			handleCartClear() {
				uni.showModal({
					title: '提示',
					content: '确定清空购物车么',
					success: ({
						confirm
					}) => {
						if (confirm) {
							this.cartPopupVisible = false
							this.clear_cart()
						}
					}
				})
			},
			handleCartItemAdd(index) {
				this.add_cartGoods(index)
			},
			handleCartItemReduce(index) {
				if (this.totalPrice.zn <= 1) {
					this.cartPopupVisible = false
				}
				this.reduce_cartGoods(index)
			},
			async showGoodDetail(item, good) {
				if (!this.isLogin) {
					uni.navigateTo({
						url: '/pages/Login/index'
					})
					return
				}
				console.log(good);
				await this.checkShopStatus()
				if (!this.status) {
					return
				} else {
					uni.navigateTo({
						url: "/goods/goodsDetail/goodsDetail?id=" + good.id
					})
				}

			},
			async init() { //页面初始化
				console.log(Date.now(), 3);
				this.loading = true
				await this.getShop()
				this.cart = uni.getStorageSync('cart') || []
			},
			/* 初始化滚动区域 */
			initScrollView() {
				return new Promise((resolve, reject) => {
					if (!this.isPageActive) {
						reject('页面不在活动状态');
						return;
					}
					let view = uni.createSelectorQuery().select('#scroll-panel');
					view.boundingClientRect(res => {
						console.log(res, 8989898);
						if (!res) {
							// 只有当页面处于活动状态且获取元素失败时才跳转
							if (this.isPageActive) {
								console.error('获取元素高度失败');
								uni.reLaunch({
									url: "/pages/tarbar/menu"
								});
							}
							reject('获取元素高度失败');
							return;
						}
						this.scrollTopSize = res.top;
						this.scrollHeight = res.height;
						setTimeout(() => {
							resolve();
						}, 100);
					}).exec();
				});
			},

			/* 获取列表数据 */
			async getListData(e) {
				if (!this.isPageActive) return;
				this.loading = true

				let res = await this.apiPost('/product/productList', {
					shop_id: e
				})
				console.log(res);
				if (res.data.code == 1) {
					this.loading = false
					this.goods = res.data.data
					this.$nextTick(() => {
						if (!this.isPageActive) return;
						this.initScrollView().then(() => {
							if (!this.isPageActive) return;
							this.getElementTop();
						});
					});

				} else {
					this.msg(res.data.msg)
				}
			},
			/* 获取元素顶部信息 */
			getElementTop() {
				new Promise((resolve, reject) => {
					if (!this.isPageActive) {
						reject('页面不在活动状态');
						return;
					}
					let view = uni.createSelectorQuery().selectAll('.main-item');
					view.boundingClientRect(data => {
						if (!this.isPageActive) {
							reject('页面不在活动状态');
							return;
						}
						resolve(data);
					}).exec();
				}).then((res) => {
					console.log(res, 9999999000);
					if (!this.isPageActive) return;

					if (!res) {
						// 只有当页面处于活动状态且获取元素失败时才跳转
						if (this.isPageActive) {
							console.error('获取元素位置失败');
							uni.reLaunch({
								url: "/pages/tarbar/menu"
							});
						}
						return;
					}
					let topArr = res.map((item) => {
						return item.top - this.scrollTopSize; /* 减去滚动容器距离顶部的距离 */
					});
					this.topArr = topArr;
					/* 获取最后一项的高度，设置填充高度。判断和填充时做了 +-20 的操作，是为了滚动时更好的定位 */
					let last = res[res.length - 1].height;
					if (last - 20 < this.scrollHeight) {
						this.fillHeight = this.scrollHeight - last - 20;
					}
				});
			},
			/* 主区域滚动监听 */
			mainScroll(e) {
				console.log(e,99999);
				// 节流方法
				clearTimeout(this.mainThrottle);
				this.mainThrottle = setTimeout(() => {
					scrollFn();
				}, 10);

				let scrollFn = () => {
					let top = e.detail.scrollTop;
					let index = 0;
					/* 查找当前滚动距离 */
					for (let i = (this.topArr.length - 1); i >= 0; i--) {
						/* 在部分安卓设备上，因手机逻辑分辨率与rpx单位计算不是整数，滚动距离与有误差，增加2px来完善该问题 */
						if ((top + 2) >= this.topArr[i]) {
							index = i;
							break;
						}
					}
					console.log(this.leftIndex, 78781);
					this.leftIndex = (index < 0 ? 0 : index);
				}
			},
			/* 左侧导航点击 */
			leftTap(e) {
				console.log(e);
				let index = e.currentTarget.dataset.index;
				this.scrollInto = `item-${index}`;
			}
		}
	}
</script>

<style lang="scss">
	.search-box {
		height: 100rpx;
		padding: 20rpx 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;

		.search-input {
			height: 60rpx;
			width: 100%;
			background-color: #f7f7f7;
			font-size: $font-size-base;
			border-radius: 50rem !important;
			display: flex;
			justify-content: center;
			align-items: center;

			.search-icon {
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;
			}
		}
	}

	.loading {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #f9fbfd !important;

		image {
			width: 260rpx;
			height: 260rpx;
			position: relative;
			margin-top: -200rpx;
			/* #ifdef h5 */
			margin-top: 0;
			/* #endif */
		}
	}

	page {
		height: 100vh;
	}

	.container {
		height: 100%;
	}

	/* 容器 */
	.container {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		align-content: flex-start;

		&>view {
			width: 100%;
		}

		.scroll-panel {
			flex: 1;
			flex-grow: 1;
			height: 0;
			overflow: hidden;
		}

		.nav {
			width: 100%;
			// height: 212rpx;

			flex-shrink: 0;
			display: flex;
			flex-direction: column;

			.header {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx;
				background-color: #ffffff;
				height: 140rpx;

				.left {
					flex: 1;
					display: flex;
					flex-direction: column;

					.store-name {
						display: flex;
						justify-content: flex-start;
						align-items: center;
						font-size: $font-size-lg;
						margin-bottom: 10rpx;

						.iconfont {
							margin-left: 10rpx;
							line-height: 100%;
						}
					}

					.store-location {
						display: flex;
						justify-content: flex-start;
						align-items: center;
						color: $text-color-assist;
						font-size: $font-size-sm;

						.iconfont {
							vertical-align: middle;
							display: table-cell;
							color: $color-primary;
							line-height: 100%;
						}
					}
				}

				.right {
					background-color: $bg-color-grey;
					border-radius: 38rpx;
					display: flex;
					align-items: center;
					font-size: $font-size-sm;
					padding: 0 38rpx;
					color: $text-color-assist;

					.dinein,
					.takeout {
						position: relative;
						display: flex;
						align-items: center;

						&.active {
							padding: 14rpx 38rpx;
							color: #ffffff;
							background-color: $color-primary;
							border-radius: 38rpx;
						}
					}

					.takeout {
						margin-left: 20rpx;
						height: 100%;
						flex: 1;
						padding: 14rpx 0;
					}

					.dinein.active {
						margin-left: -38rpx;
					}

					.takeout.active {
						margin-right: -38rpx;
					}
				}
			}

			.coupon {
				flex: 1;
				width: 100%;
				background-color: $bg-color-primary;
				font-size: $font-size-base;
				color: $color-primary;
				padding: 0 20rpx;
				display: flex;
				align-items: center;
				overflow: hidden;

				.title {
					flex: 1;
					margin-left: 10rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.iconfont {
					line-height: 100%;
				}
			}
		}

		.bottom-panel {
			padding-bottom: 0;
			// padding-bottom: constant(safe-area-inset-bottom);
			// padding-bottom: env(safe-area-inset-bottom);
		}
	}

	.list-box {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		align-content: flex-start;
		font-size: 28rpx;

		.left {
			width: 200rpx;
			background-color: #f6f6f6;
			line-height: normal;
			box-sizing: border-box;
			font-size: 32rpx;

			.menus {
				width: 200rpx;
				height: 100%;
				overflow: hidden;
				background-color: $bg-color-grey;

				.wrapper {
					width: 100%;
					height: 100%;

					.item {
						display: flex;
						align-items: center;
						justify-content: flex-start;
						padding: 30rpx 20rpx;
						font-size: 26rpx;
						color: $text-color-assist;
						position: relative;

						&:nth-last-child(1) {
							margin-bottom: 130rpx;
						}

						&.active {
							background-color: #ffffff;
							color: $text-color-base;
						}

						.dot {
							position: absolute;
							width: 34rpx;
							height: 34rpx;
							line-height: 34rpx;
							font-size: 22rpx;
							background-color: $color-primary;
							color: #ffffff;
							top: 16rpx;
							right: 10rpx;
							border-radius: 100%;
							text-align: center;
						}
					}
				}
			}

			.fill-last {
				height: 0;
				width: 100%;
				background: none;
			}
		}

		.main {
			background-color: #fff;
			padding-left: 20rpx;
			width: 0;
			flex-grow: 1;
			box-sizing: border-box;

			.goods {
				flex: 1;
				height: 100%;
				overflow: hidden;
				background-color: #ffffff;

				.wrapper {
					width: 100%;
					height: 100%;
					padding: 20rpx;

					.list {
						width: 100%;
						font-size: $font-size-base;
						padding-bottom: 130rpx;

						.item {
							width: 100%;

							.title {
								padding: 30rpx 0;
								display: flex;
								align-items: center;
								color: $text-color-base;

								.icon {
									width: 38rpx;
									height: 38rpx;
									margin-left: 10rpx;
								}
							}
						}

						.items {
							display: flex;
							flex-direction: column;
							padding-bottom: -30rpx;
							min-height: 200rpx;

							.good {
								display: flex;
								align-items: center;
								margin-bottom: 30rpx;

								.image {
									width: 160rpx;
									height: 160rpx;
									margin-right: 20rpx;
									border-radius: 8rpx;
								}

								.right {
									flex: 1;
									height: 160rpx;
									overflow: hidden;
									display: flex;
									flex-direction: column;
									align-items: flex-start;
									justify-content: space-between;
									padding-right: 14rpx;

									.name {
										font-size: $font-size-base;
										margin-bottom: 10rpx;
									}

									.tips {
										width: 100%;
										height: 40rpx;
										line-height: 40rpx;
										overflow: hidden;
										text-overflow: ellipsis;
										white-space: nowrap;
										font-size: $font-size-sm;
										color: $text-color-assist;
										margin-bottom: 10rpx;
									}

									.price_and_action {
										width: 100%;
										display: flex;
										justify-content: space-between;
										align-items: center;

										.price_dec {
											display: flex;
											align-items: center;
											// flex-direction: column;
										}

										.price {
											font-size: $font-size-base;
											font-weight: 600;
										}

										.original_price {
											margin-left: 10rpx;
											font-size: 26rpx;
											color: #8b8b8b;
											text-decoration: line-through;
										}

										.btn-group {
											display: flex;
											justify-content: space-between;
											align-items: center;
											position: relative;

											.btn {
												padding: 0 20rpx;
												box-sizing: border-box;
												font-size: $font-size-sm;
												height: 44rpx;
												line-height: 44rpx;

												&.property_btn {
													border-radius: 24rpx;
												}

												&.add_btn,
												&.reduce_btn {
													padding: 0;
													width: 44rpx;
													border-radius: 44rpx;
												}
											}

											.dot {
												position: absolute;
												background-color: #ffffff;
												border: 1px solid $color-primary;
												color: $color-primary;
												font-size: $font-size-sm;
												width: 36rpx;
												height: 36rpx;
												line-height: 36rpx;
												text-align: center;
												border-radius: 100%;
												right: -12rpx;
												top: -10rpx;
											}

											.number {
												width: 44rpx;
												height: 44rpx;
												line-height: 44rpx;
												text-align: center;
											}
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}

	.cart-box {
		position: absolute;
		bottom: 30rpx;
		left: 30rpx;
		right: 30rpx;
		height: 96rpx;
		border-radius: 48rpx;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.2);
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 9999;

		.cart-img {
			width: 96rpx;
			height: 96rpx;
			position: relative;
			margin-top: -48rpx;
		}

		.pay-btn {
			height: 100%;
			padding: 0 30rpx;
			color: #FFFFFF;
			border-radius: 0 50rpx 50rpx 0;
			display: flex;
			align-items: center;
			font-size: $font-size-base;
		}

		.mark {
			padding-left: 46rpx;
			margin-right: 30rpx;
			position: relative;

			.tag {
				background-color: $color-warning;
				color: $text-color-white;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: $font-size-sm;
				position: absolute;
				right: -10rpx;
				top: -50rpx;
				border-radius: 100%;
				padding: 4rpx;
				width: 40rpx;
				height: 40rpx;
				opacity: .9;
			}
		}

		.price {
			flex: 1;
			color: $text-color-base;
		}
	}

	.cart-popup {
		.top {
			background-color: $bg-color-primary;
			color: $color-primary;
			padding: 10rpx 30rpx;
			font-size: 24rpx;
			text-align: right;
		}

		.cart-list {
			background-color: #FFFFFF;
			width: 100%;
			overflow: hidden;
			min-height: 1vh;
			max-height: 60vh;

			.wrapper {
				height: 100%;
				display: flex;
				flex-direction: column;
				padding: 0 30rpx;
				margin-bottom: 156rpx;

				.item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 30rpx 0;
					position: relative;

					&::after {
						content: ' ';
						position: absolute;
						bottom: 0;
						left: 0;
						width: 100%;
						background-color: $border-color;
						height: 2rpx;
						transform: scaleY(.6);
					}

					.left {
						flex: 1;
						display: flex;
						flex-direction: column;
						overflow: hidden;
						margin-right: 30rpx;

						.name {
							font-size: $font-size-sm;
							color: $text-color-base;
						}

						.props {
							color: $text-color-assist;
							font-size: 24rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}

					.center {
						margin-right: 120rpx;
						font-size: $font-size-base;
					}

					.right {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.btn {
							width: 46rpx;
							height: 46rpx;
							border-radius: 100%;
							padding: 0;
							text-align: center;
							line-height: 46rpx;
						}

						.number {
							font-size: $font-size-base;
							width: 46rpx;
							height: 46rpx;
							text-align: center;
							line-height: 46rpx;
						}
					}
				}
			}
		}
	}
</style>